<template>
  <div class="card6">
    <div class="card6-text">
      <div id="card3-left-text2-container">
        <span class="vertical-line1"></span>
        <p id="card6-text1">{{ $t('card6.text1') }}</p>
      </div>
      <div id="card3-left-text2-container">
        <span class="vertical-line-card6-2"></span>
        <p id="card6-text2" v-html="$t('card6.text2')"></p>
      </div>
      <div id="card3-left-text2-container">
        <span class="vertical-line-card6-3"></span>
        <p id="card6-text3" v-html="$t('card6.text3')"></p>
      </div>
    </div>
    <div class="card6-phbox">
      <div class="card6-ph" v-for="(imgSrc, index) in images" :key="index">
        <img :src="imgSrc" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import { useI18n } from 'vue-i18n'; // 引入 useI18n 钩子，用于国际化支持
import { onMounted, watch, computed } from 'vue'; // 引入 Vue 的生命周期钩子、watch 函数和 computed 函数

export default {
  name: 'MyCard6',
  setup() {
    // 使用 useI18n 钩子获取当前语言
    const { locale } = useI18n();

    // 计算属性 images，根据当前语言动态选择图片路径
    const images = computed(() => {
      const lang = locale.value;
      if (lang === 'en') {
        return [
          require('@/assets/card6-1-EN.png'),
          require('@/assets/card6-2-EN.png'),
          require('@/assets/card6-3-EN.png')
        ];
      } else {
        return [
          require('@/assets/card6-1.png'),
          require('@/assets/card6-2.png'),
          require('@/assets/card6-3.png')
        ];
      }
    });

    // 更新样式的函数，根据语言改变样式
    const updateStyles = (lang) => {
      if (lang === 'en') {
        // 如果语言是英文，调整样式
        document.querySelector('.vertical-line-card6-2').style.marginTop  = '-3.5%';
        document.querySelector('.vertical-line-card6-3').style.marginTop  = '-3.5%';
        document.querySelector('#card6-text1').style.fontSize = '3vw';
        document.querySelector('#card6-text2').style.fontSize = '1.6vw';
        document.querySelector('#card6-text3').style.fontSize = '1.6vw';
      } else {
        document.querySelector('.vertical-line-card6-2').style.marginTop  = '0';
        document.querySelector('.vertical-line-card6-3').style.marginTop  = '0';
        document.querySelector('#card6-text1').style.fontSize = '2.9vw';
        document.querySelector('#card6-text2').style.fontSize = '1.4vw';
        document.querySelector('#card6-text3').style.fontSize = '1.4vw';
      }
    };

    // 监听语言变化，当语言变化时更新样式
    watch(() => locale.value, (newLang) => {
      updateStyles(newLang);
    });

    // 组件挂载完成后，根据当前语言更新样式
    onMounted(() => {
      updateStyles(locale.value);
    });

    return {
      images
    };
  },
}
</script>

<style scoped>
.card6 {
  width: 100%;
  height: 100%;
  background: url(@/assets/background7.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 2%;
}

.card6-text {
  width: 100%;
  height: 20%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 50px;
  margin-left: 70px;
}

#card6-text1 {
  font-size: 3vw;
  margin: 0;
  font-family: "STSong", "华文中宋", serif;
  color: #2E75C9;
}

#card6-text2 {
  font-size: 1.6vw;
  margin: 0;
  text-align: left;
  font-family: "STSong", "华文中宋", serif;
}

#card6-text3 {
  font-size: 1.6vw;
  margin: 0;
  text-align: left;
  font-family: "STSong", "华文中宋", serif;
}

.card6-phbox {
  width: 85%; /* 调整为合适的宽度 */
  height: 27%; /* 高度由内容决定 */
  display: flex;
  justify-content: space-between; /* 在图片之间添加间距 */
  align-items: center;
  position: absolute;
  left: 70px;
  bottom: 20%;
}

.card6-ph {
  height: 100%;
  display: flex;
  justify-content: center;
}

.card6-ph img {
  width: 100%; /* 图片宽度为容器宽度 */
  height: auto; /* 高度自动 */
  transition: transform 0.5s ease;
}

.card6-ph:hover img {
  transform: scale(1.1);
}

#card3-left-text2-container {
  display: flex;
  align-items: center;
  margin: 0;
}

.vertical-line1 {
  width: 0.6vw;
  height: 2.2vw;
  background-color: #2E75C9;
  margin-right: 10px;
}

.vertical-line-card6-2 {
  width: 0.6vw;
  height: 0.6vw;
  background-color: black;
  margin-right: 10px;
  margin-top: 0;
}

.vertical-line-card6-3 {
  width: 0.6vw;
  height: 0.6vw;
  background-color: black;
  margin-right: 10px;
  margin-top: 0;
}
</style>
